<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TEXTBOX COMPONENT</title>
<!-- [REQUIRED] JQUERY SCRIPT/CSS INTEGRATION -->
<!-- INCLUDING COMPONENT-RELATED EXTERNAL SCRIPTS -->
<link href="../../api/css/cupertino/jquery-ui-1.10.1.custom.min.css"
      rel="stylesheet">
<script src="../../api/js/jquery-1.8.3.js"></script>
<script src="../../api/js/jquery-ui-1.10.1.custom.min.js"></script>
<script type='text/JavaScript'
        src='../../../zbw_reporting/scripts/framework_include.js'></script>
<!-- [REQUIRED] SCRIPT FOR INTEGRATION WITH BOI -->
<script type="text/javascript">
//comment this line when done testing
//$(function(){initialize();});

var BOI = parent.BOI; //REQUIRED
var sel_type = 'S';
var read_var_profile = 'YES';
var properties = { //REQUIRED
    variable:undefined,
    value:undefined,
    notify:false,
    ranges:undefined
};


$(function () {

    $("#addbutton").live('click', function () {
       // BOI.displayLog('test');
        addE();
    });
    $("#buttonrem").live('click', function () {
        delC()
    });

    $('#variable_values_select').live('keyup', function () {
        //properties.value = $(this).val();
    });

});

var initialize = function initialize() {

    //REQUIRED
    //initialization function ... see below..

    if (properties.variable) {
        var seltype = properties.variable.seltype;
        initializeVarScreen(seltype);
    }


    refreshProperties();
};
var refresh = function refresh() { //REQUIRED function to be called by parent at anytime to refresh data.

};

var refreshProperties = function refreshProperties() { //REQUIRED function to be called by parent when a property change occurs
    vname = properties.varname ? properties.varname
            : properties.variable ? properties.variable.name : undefined;
    if (vname) {
        var txt = $('input:text[id="#variable_values_select"]').val();

        if (properties.notify) {
            BOI.Events.raiseEvent(BOI.Events.varchange, [ vname, txt ]);
        }
        var label = $('#bi_var_name');
        label.html(vname);
        if (properties.variable) {
            var label = $('label[for="variable_values_select"]');
            label.html(properties.variable.name);
            label.attr('title', properties.variable.description);
            $('#bi_desc').html(properties.variable.description);
            initialiseValues();
        }
    }
};

function initialiseValues() {

    resV = document.getElementsByName("variable_values_select__")[0];
    if (properties.value instanceof Array) {
        for (var i in properties.value) {
            var newC = new Option();
            newC.value = i;
            newC.text = i;
        }
        resV.options.add(newC);
    }

}


function initializeVarScreen(sel_type) {
    if (sel_type == 'M') {
        $("#divadd").css("display", "none");
        $("#VAR_OPERATOR").css("display", "none");
    }
    if (sel_type == 'I' || sel_type == 'S') {
        $("#RangeField").css("display", "none");
        $("#VAR_OPERATOR").css("display", "block");
    }
    if (sel_type == 'S') {
        $("#tdshowrange").css("display", "none");
    }
    $("#MultiSel").css("display", "none");


    $("#buttonrem").css("display", "none");
}

function addE() {
    // document.getElementById("MultiSel").style.display = "";
    $("#MultiSel").css("display", "");
    fromV = document.getElementsByName("variable_values_select")[0];
    if (document.getElementsByName("variable_values_select_").length > 0) {
        toV = document.getElementsByName("variable_values_select_")[0];
    }
    resV = document.getElementsByName("variable_values_select__")[0];
    if (fromV.value == "") {
        return;
    }
    var newC = new Option();
    newC.value = fromV.value;
    newC.text = fromV.value;
    if (document.getElementsByName("variable_values_select_").length > 0) {
        if (toV.value != "") {
            newC.value = newC.value + "|" + toV.value;
            newC.text = newC.text + " to " + toV.value;
        }
    }
    resV.options.add(newC);
    fromV.value = "";
    if (document.getElementsByName("variable_values_select_").length > 0) {
        toV.value = "";
    }

    upateBOIVarValues();

    $("#buttonrem").css("display", "block");
    $("#MultiSel").css("display", "block");
}

function upateBOIVarValues() {
    var seltp = properties.variable.seltype;
    var values = [];

    updateProperties(seltp);

}

function delC() {
    try {
         resV = $("#variable_values_select__").val();
        <!--resV = document.getElementsByName("variable_values_select__")[0];-->
         i = 0;
        $("#variable_values_select__").each(function (i) {
            $('option:selected', this).remove();
        });
        var seltp = properties.variable.seltype;
        updateProperties(seltp);

        if (resV.length == 0) {
            $("#MultiSel").css("display", "none");
        }
    } catch (e) {
        alert("Cannot remove item. Please highlight the item then click remove");
        BOI.BOILib.Util.log('Cannot remove item. Please highlight the item then click remove',true);
    }
}

function updateProperties(seltp) {

    var ranges=[];
    var values=[];

    $("#variable_values_select__ option").each(function () {

        if (seltp == "I") {
            var range_arr = ($(this).val()).split("|");
            var range = splitdata(range_arr);

            ranges.push(range);
        }

        if (seltp == "S") {
            var val_arr = ($(this).val()).split("|");
            var value=splitdata(val_arr);
            ranges.push(value);
        }

        if (seltp == "M") {
            var val_arr = $(this).val();
            values.push(val_arr);
        }
         if (seltp == "P") {
            var val_arr = $(this).val();
            values.push(val_arr);
        }


    });

    if (ranges) {
        properties.ranges = ranges;
    }

    if (values) {
        properties.value = values;
    }
}
function splitdata(range_arr){
var range={};
    if (range_arr.length >= 2) {
        range.from = range_arr[0];
        range.to = range_arr[1];

        //TODO:: ANSAJ:: find out the actual parameters for the operators
        // hint: talk to Asharaf and findout
        range.operator = "BT";
    }
    return range;
}

function showRange(opt) {
    if (opt == "BT") {
        $("#RangeField").css("display", "");
    } else {
        $("#RangeField").css("display", "none");
    }

}

$.widget("custom.catcomplete", $.ui.autocomplete, {
    _renderMenu:function (ul, items) {
        var that = this, currentCategory = "";
        $.each(items, function (index, item) {
            if (item.category != currentCategory) {
                //ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
                currentCategory = item.category;
            }
            that._renderItemData(ul, item);
        });
    }
});

var search_json_url = "data/bi_search.json";
$(function () {
    $("#variable_values_select").catcomplete(
            {
                source:function (request, response) {
                    BOI.loadF4Values(properties.variable.name, 1,
                            undefined, function (data) {
                                data = $.parseJSON(data.json);
                                response($.map(
                                        data.VALUES_TABLE_C.IHTTPNVP,
                                        function (item) {
                                            return {
                                                label:item.NAME,
                                                value:item.VALUE
                                            }
                                        }));
                            }, 'ALL', request.term, 'JSON', undefined,
                            undefined, true);
                },
                minLength:1,
                select:function (event, ui) {
                    /* log( ui.item ?
                     "Selected: " + ui.item.label :
                     "Nothing selected, input was " + this.value);*/
                },
                open:function () {
                    /*  $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );*/
                },
                close:function () {
                    /* $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );*/
                }
            });
    //begin
    $("#variable_values_select_").catcomplete(
            {
                source:function (request, response) {
                    BOI.loadF4Values(properties.variable.name, 1,
                            undefined, function (data) {
                                data = $.parseJSON(data.json);
                                response($.map(
                                        data.VALUES_TABLE_C.IHTTPNVP,
                                        function (item) {
                                            return {
                                                label:item.NAME,
                                                value:item.VALUE
                                            }
                                        }));
                            }, 'ALL', request.term, 'JSON', undefined,
                            undefined, true);
                },
                minLength:1,
                select:function (event, ui) {
                    /* log( ui.item ?
                     "Selected: " + ui.item.label :
                     "Nothing selected, input was " + this.value);*/
                },
                open:function () {
                    /*  $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );*/
                },
                close:function () {
                    /* $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );*/
                }
            });
    //end


});
</script>


<!-- COMPONENT STYLING -->
<style type="text/css">
    html, body {
        background-color: transparent;
        font-family: Arial, Helvetica, sans-serif;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    label {
        margin: 10px;
        width: 100%;
        cursor: help;
        display: block;
    }

 p {
            margin-left: 2px;
            font-weight : normal;
            font-size:14px;
          //  position:fixed;
            text-align:center;
            width:100%;
            height:30px;
            margin-top:0px;
           // text-transform:"Capitalize";
            background-color:#ffffff;
            z-index:10;
            line-height : 28px;
            text-transform :uppercase;
            margin-right: 5px;
    }

    body>div {
        width: 100%;
    }

    div div {
        padding-left: 10px;
        padding-right: 20px;

    }

    input {
        width: 100%;
        height: 24px;
    }
    table {
       top : 20px;
    }
</style>

<!-- Auto Complete -->
<style type="text/css">
    .ui-autocomplete .ui-menu-item {
        margin: 10px ;
        font-size: 12px;

    }
</style>
</head>
<body>
<p id="bi_desc" style="width:94%;"></p>
<table>
    <TR>
        <td nowrap><select name="VAR_OPERATOR" id="VAR_OPERATOR"
                           onchange="showRange(this.value)">
            <option value="EQ" selected>=</option>
            <option value="BT">[ ]</option>
            <!--option value="LE"  > &lt;= </option>
       <option value="GT"  > &gt; </option>
       <option value="GE"  > &gt;= </option>
       <option value="LT"  > &lt; </option>
       <option value="CP"  > * </option>
       <option value="NE"  > &lt;&gt; </option-->
        </select> <input id="variable_values_select" type=text name="variable_values_select"
                         style="width: 80px"> <span id="RangeField"
                                                    style="display: none">to <input id="variable_values_select_"
                                                                                    type=text
                                                                                    name="variable_values_select_"
                                                                                    style="width: 80px">
      </span> <!--<button title="search"
          style="font-size: 10; cursor: hand; height: 26px;"
          class="SAPBEXBtnStd" onclick="showSearch();">search</button> &nbsp;-->

        <span id="adddiv">
          <button id="addbutton" title="add more entries"
                  style="font-size: 10; cursor: hand; height: 26px;"
                  >add
          </button> </span>
        </TD>
    </TR>
    <tr id="MultiSel" style="display: none">
        <td nowrap><select name="variable_values_select__" id="variable_values_select__" size=3
                           style="width: 190px">

            <script language="javascript">
                document.getElementById("MultiSel").style.display = "";
            </script>

        </select>
            <button id="buttonrem"
                    title="remove"
                    style="font-size: 10; cursor: hand; height: 26px;float:right"
                    >remove
            </button>
        </td>
    </tr>
</table>


</body>
</html>